import React, { Component } from 'react'
import { Skeleton, List, Avatar, Input, Divider } from 'antd'
import { connect } from 'react-redux'
// import { allArticleReq } from '@/utils/request'
import actionCreator from '@/store/actionCreator'
import { SEARCHBLOG } from '@/store/actionType'
const { Search } = Input
const mapStateToProps = (state, ownProps) => {
  return {
    searchList: state.getIn(['blog', 'searchList']).filter(item => item.isPub)
  }
}
const mapDispatchToProps = {
  // promise中间件
  getAllArticle: actionCreator.getAllArticle,
  setSearch: (value) => {
    return {
      type: SEARCHBLOG,
      payload: value
    }
  },
  setBreadList: actionCreator.setBreadList
}
@connect(mapStateToProps, mapDispatchToProps)
class Category extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      // initLoading: true
      value: ''
    }
  }
  componentDidMount() {
    this.props.setBreadList(['博客', '搜索'])
    this.props.getAllArticle()
  }
  render() {
    const { loading, value } = this.state;
    const { searchList } = this.props
    return (
      <div>
        <Search placeholder="请输入..."

          onSearch={this.searchFunc}
          onChange={(e) => this.setState({ value: e.target.value })}
          value={value}
          loading={false} enterButton />
        {/* 分割线 */}
        <Divider orientation="left">搜索结果</Divider>
        <List
          className="demo-loadmore-list"
          // style={{ minHeight: '350px' }}
          size="small"
          // loading={initLoading}
          itemLayout="vertical"
          // loadMore={loadMore}
          dataSource={searchList}
          renderItem={item => (
            <List.Item
              key={item._id}
              // 底部
              actions={
                !loading && [
                  // <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                  <Avatar key="avatar" src={item.avatar || '/topaz-blog/qq.jpg'} />,
                  <span key="author">{item.author}</span>
                ]
              }
              // 右侧
              extra={
                !loading && (
                  <img
                    onClick={() => this.goDetails(item._id)}
                    height={100}
                    alt="logo"
                    src={item.logo || "https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"}
                  />
                )
              }
            >
              {/* // 骨架屏占位 */}
              <Skeleton loading={loading} active avatar>
                <List.Item.Meta
                  onClick={() => this.goDetails(item._id)}
                  // avatar
                  title={item.title}
                  description={item.text.substr(0, 40)}
                />
                {/* {item.text.substr(0, 40)} */}
              </Skeleton>
            </List.Item>
          )}
        />
      </div>
    )
  }
  // 去详情
  goDetails = (id) => {
    this.props.history.push('/blog/details/' + id)
  }
  // 搜索
  searchFunc = (value) => {
    if(!value.trim()) return
    this.props.setSearch(value)
    this.setState({value: '', loading: false})
  }
}
export default Category
